<script lang="ts" setup>
import { ref } from 'vue';
import type { Ref } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router'

const router = useRouter()

let show = ref(false)


const tel = ref('');

const message = ref()

const fileList = ref([
    {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',
        deletable: true,
        beforeDelete: () => {
            showToast('删除前置处理');
        },
    },

]);


//返回
function onClickLeft() {
    router.push('/user')
}

//提交按钮事件
// function submit() {
//     showToast({
//         message: '提交成功,我们将采纳您的意见',
//         wordBreak: 'break-word',
//     });

//     router.push('/user')
// }

//遮罩层点击事件
function conClick(res: any) {
    if (res == 'true') {
        router.push('/user')
        showToast({
            message: '提交成功,我们将采纳您的意见',
            wordBreak: 'break-word',
        });
    }
}
</script>

<template>
    <!-- 导航 -->
    <van-nav-bar title="意见反馈" left-text="返回" left-arrow @click-left="onClickLeft" />

    <!-- 意见反馈输入框 -->
    <van-cell-group inset>
        <van-field rows="5" v-model="message" autosize label="意见反馈" type="textarea" maxlength="100" placeholder="请填写您的意见和建议"
            show-word-limit />
    </van-cell-group>

    <!-- 上传图片 -->
    <div class="pic">
        <p>图片(选填,提供问题截图)</p>
        <van-uploader v-model="fileList" :deletable="false" />
    </div>

    <!-- 输入联系方式 -->
    <van-cell-group inset>
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field v-model="tel" placeholder="请填写手机号或邮箱(选填)" type="tel" label="联系方式" />
    </van-cell-group>

    <!-- 提交按钮 -->
    <!-- <van-button type="primary" block @click="submit">提交</van-button> -->

    <!-- 遮罩层 -->
    <van-button type="primary" text="提交" @click="show = true" />
    <van-overlay :show="show" @click="show = false">
        <template #default>
            <div class="content">
                <p>确定提交吗</p>
                <div class="bottom">
                    <button @click="conClick('false')">取消</button>
                    <button class="confirm" @click="conClick('true')">确定</button>
                </div>
            </div>
        </template>
    </van-overlay>
</template>

<style lang="scss" scoped>
/* body {
    width: 100%;
    height: 100%;
    background-color: darkgray;
} */

.van-cell-group {
    border-bottom: 1px solid gray;
    margin-bottom: 10px;
}

.pic {
    margin-left: 15px;
    border-bottom: 1px solid gray;
    margin-bottom: 15px;
}

.pic p {
    margin-bottom: 15px;
}

.van-button {
    margin: 20px;
    width: 90%;
    border-radius: 15px;
}

.content {
    width: 200px;
    height: 200px;
    background-color: white;
    margin: auto;
    align-content: center;
    margin-top: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;

    p {
        margin: 50px auto;
        align-content: center;
    }

    .bottom {
        display: flex;
        justify-content: space-evenly;
    }

    .confirm {
        background-color: skyblue;
    }
}
</style>